<template>
    <a-card :bordered="false">
        <a-tabs :activeKey="labelPageKey" @change="handleTabBeforeChange">
            <a-tab-pane tab="进厂" key="tab1" :forceRender="true">
                <div id="video-container1">
                    <video ref="videoElement1" controls width="100%"></video>
                </div>
            </a-tab-pane>
            <a-tab-pane tab="出厂" key="tab2" :forceRender="true">
                <div id="video-container2">
                    <video ref="videoElement2" controls width="100%"></video>
                </div>
            </a-tab-pane>
        </a-tabs>
    </a-card>
</template>

<script>
import { getAction } from '../../api/manage';
import "videojs-contrib-hls";
import "video.js/dist/video-js.css";
import videojs from "video.js";

export default {
    data() {
        return {
            labelPageKey: 'tab1',
            videourl1: '',
            videourl2: '',
            hlsInstance1: null,
            hlsInstance2: null,
            url1: "/gateAlarmData/gateAlarmData/m/getHlsUrl1",
            url2: "/gateAlarmData/gateAlarmData/m/getHlsUrl2",
        }
    },
    mounted() {
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
        script.onload = () => {
            this.initHls();
        };
        script.onerror = () => {
            console.error("Failed to load Hls.js");
        };
        document.head.appendChild(script);

        this.getHlsurl();
    },
    created() {
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
        script.onload = () => {
            this.initHls();
        };
        script.onerror = () => {
            console.error("Failed to load Hls.js");
        };
        document.head.appendChild(script);

        this.getHlsurl();
    },
    methods: {
        // 标签页切换调用
        handleTabBeforeChange(value) {
            console.log("切换标签页", value);
            if (this.hlsInstance1) {
                this.hlsInstance1.destroy();
                this.videourl1 = ''; // 清空视频链接
            }
            if (this.hlsInstance2) {
                this.hlsInstance2.destroy();
                this.videourl2 = ''; // 清空视频链接
            }
            this.labelPageKey = value;
            this.getHlsurl();
        },
        getHlsurl() {
            const videoRef = this.labelPageKey === 'tab1' ? 'videoElement1' : 'videoElement2';
            this.$refs[videoRef].src = '';
            this.initHls(this.labelPageKey);
            // const url = this.labelPageKey === 'tab1' ? this.url1 : this.url2;
            // getAction(url)
            //     .then(res => {
            //         console.log(res);
            //         const videoRef = this.labelPageKey === 'tab1' ? 'videoElement1' : 'videoElement2';
            //         this.$refs[videoRef].src = res.result.data.lives[0].streams[0].hls;
            //         this.initHls(this.labelPageKey);
            //     })
            //     .catch(err => {
            //         console.error("Failed to get HLS video URL", err);
            //     });
        },
        initHls(tabKey) {
            const videoElement = tabKey === 'tab1' ? this.$refs.videoElement1 : this.$refs.videoElement2;

            if (Hls.isSupported()) {
                const hlsInstance = new Hls();
                hlsInstance.loadSource(videoElement.src);
                hlsInstance.attachMedia(videoElement);
                hlsInstance.on(Hls.Events.MANIFEST_PARSED, function () {
                    videoElement.play().catch(() => {
                        videoElement.muted = true;
                        videoElement.play();
                    });
                });

                if (tabKey === 'tab1') {
                    this.hlsInstance1 = hlsInstance;
                } else {
                    this.hlsInstance2 = hlsInstance;
                }
            } else if (videoElement.canPlayType("application/x-mpegURL")) {
                videoElement.addEventListener("loadedmetadata", function () {
                    videoElement.play();
                });
            }
        },
    },
};
</script>

<style>
@import '~@assets/less/common.less';

#video-container1,
#video-container2 {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
</style>